import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import React, { useState } from "react";
import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function StoreListScreen() {
  const [stores] = useState([
    {
      id: "1",
      name: "星河咖啡店",
      location: "北京市 朝阳区 建国路 88 号",
      manager: "张三",
      contact: "13812345678",
      image: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4",
      revenue: "¥2,300",
      orders: 45,
    },
    {
      id: "2",
      name: "蓝莓甜品屋",
      location: "上海市 徐汇区 衡山路 66 号",
      manager: "李四",
      contact: "13798765432",
      image: "https://images.unsplash.com/photo-1504674900247-0877df9cc836",
      revenue: "¥3,120",
      orders: 62,
    },
  ]);

  const renderStore = ({ item }: { item: any }) => (
    <TouchableOpacity style={styles.card} activeOpacity={0.8} onPress={() => {
      router.push({ pathname: "/pages/StoreDetailScreen", params: { ...item } })
    }}>
      <Image source={{ uri: item.image }} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.name}>{item.name}</Text>

        <View style={styles.row}>
          <Ionicons name="location-sharp" size={16} color="#FF6B6B" />
          <Text style={styles.location}>{item.location}</Text>
        </View>

        <View style={styles.row}>
          <MaterialCommunityIcons name="account-tie" size={16} color="#4ECDC4" />
          <Text style={styles.detail}>负责人：{item.manager || "—"}</Text>
        </View>

        <View style={styles.row}>
          <Ionicons name="call" size={16} color="#1E90FF" />
          <Text style={styles.detail}>{item.contact || "暂无联系方式"}</Text>
        </View>

        <View style={styles.status}>
          <Text style={styles.revenue}>💰 {item.revenue}</Text>
          <Text style={styles.orders}>📦 {item.orders} 单</Text>
        </View>
      </View>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <Stack.Screen
        options={{
          headerRight: () => (
            <TouchableOpacity
              onPress={() => {
                router.push('/pages/CreateStoreScreen')
              }}
            >
              <Ionicons name="add" size={26} style={{ marginRight: 12 }} />
            </TouchableOpacity>
          ),
        }}
      ></Stack.Screen>

      <FlatList
        data={stores}
        keyExtractor={(item) => item.id}
        renderItem={renderStore}
        contentContainerStyle={{ paddingBottom: 20 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F9FAFB",
    padding: 16,
  },
  title: {
    fontSize: 22,
    fontWeight: "700",
    marginBottom: 16,
    color: "#222",
  },
  card: {
    backgroundColor: "#fff",
    borderRadius: 16,
    marginBottom: 14,
    overflow: "hidden",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 6,
    elevation: 3,
  },
  image: {
    width: "100%",
    height: 160,
  },
  info: {
    padding: 12,
  },
  name: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 6,
    color: "#333",
  },
  location: {
    flex: 1,
    fontSize: 14,
    color: "#555",
    marginLeft: 4,
  },
  detail: {
    flex: 1,
    fontSize: 14,
    color: "#666",
    marginLeft: 4,
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    marginVertical: 2,
  },
  status: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 10,
  },
  revenue: {
    fontWeight: "600",
    color: "#34C759",
  },
  orders: {
    fontWeight: "600",
    color: "#FF9500",
  },
});